<template>
  <div>
    <div class="artBg">
      <img :src="sameData.imgSrc" alt="">
    </div>

    <div class="artTitle">
      <h3><span>——  服务范畴  ——</span></h3>
    </div>

    <ArtPhoto :photo-data="artImg"></ArtPhoto>

    <div class="artTitle" v-if="hideTrain">
      <h3><span>{{sameData.titleOne.title}}</span></h3>
      <h5>{{sameData.titleOne.desc}}</h5>
    </div>

    <div class="artItems" v-if="hideTrain">
      <div class="container">
        <div class="row">
          <div class="col-md-4 col-xs-12" v-for="(item,index) in ListData" :key="index">
            <div class="decorateZone">
              <div class="decorateList">
                <span>{{item.titleInfoOne}}</span>
                <span>{{item.titleInfoTwo}}</span>
                <ul>
                  <li v-for="(value,index) in item.descList" :key="index">
                    {{value}}
                  </li>
                </ul>
              </div>
              <div class="priceStand">
                <h6>{{item.priceInfo}}</h6>
                <h3 v-for="(val,index) in item.pricecList" :key="index">{{val}}</h3>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="artTitle">
      <h3><span>{{sameData.titleTwo.title}}</span></h3>
      <h5>{{sameData.titleTwo.desc}}</h5>
    </div>

    <div class="artImgList">
      <a href="#" v-for="(value,index) in imgsUrl" :key="index">
        <img :src="value">
      </a>
    </div>
  </div>
</template>

<script>
    import ArtPhoto from './ArtPhoto'
    import {mapActions,mapGetters} from 'vuex';
    export default {
        name: "same-frame",
        props:['sameData'],
        components:{
          ArtPhoto
        },
        computed:mapGetters([
          'hideTrain'
        ]),
        data(){
          return{
            ListData:[],
            imgsUrl:[],
            artImg:[
              {title:'整店装修',imgUrl:'../static/img/cooperate/waibao_02.png'},
              {title:'详情页设计',imgUrl:'../static/img/cooperate/waibao_03.png'},
              {title:'推广图设计',imgUrl:'../static/img/cooperate/waibao_04.png'},
              {title:'产品图精修',imgUrl:'../static/img/cooperate/waibao_05.png'}
            ]
          }
        },
        mounted(){
          this.ListData=this.sameData.ListOne;
          this.imgsUrl=this.sameData.imgsUrl;
        }


    }

    $('.artBg').css('zIndex',10);
</script>

<style scoped>
  @import '../assets/css/artCommon.css';
</style>
